<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <title>layui</title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <link rel="stylesheet" th:href="@{/layui/layui.css}"  media="all" />
    <link rel="stylesheet" th:href="@{/css/StudentSelect.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/search.css}"/>
    <script type="text/javascript" th:src="@{/js/jquery-3.2.1.js}"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div style="margin-bottom: 5px;">

    <!-- 示例-970 -->
    <ins class="adsbygoogle" style="display:inline-block;width:100%;height:20px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="3820120620"></ins>

</div>

<div>
    <form>
        <select name="city" class="search_select">
            <option value="">搜索内容</option>
            <option value="1">姓名</option>
            <option value="2">楼栋</option>
            <option value="3">教师号</option>
        </select>
        <input class="search_input" type="text" placeholder="请输入搜索的内容"/>
        <button class="search_btn" type="submit">搜索</button>
    </form>

</div>

<!--<div class="layui-btn-group demoTable">
    <button class="layui-btn" data-type="getCheckData">获取选中行数据</button>
    <button class="layui-btn" data-type="getCheckLength">获取选中数目</button>
    <button class="layui-btn" data-type="isAll">验证是否全选</button>
</div>-->

<table class="layui-table" lay-data="{width: '100%', height:'800px', url:'/dor/dm', page:true, id:'idTest'}" lay-filter="demo">
    <thead>
    <tr>
        <th lay-data="{checkbox:true, fixed: true}"></th>
        <th lay-data="{field:'dm_id', width:100, sort: true, fixed: true}">ID</th>
        <th lay-data="{field:'name', width:80}">姓名</th>
        <th lay-data="{field:'sex', width:80}">性别</th>
        <th lay-data="{field:'build_id', width:80, sort: true}">楼栋</th>
        <th lay-data="{field:'password', width:80}">密码</th>
        <th lay-data="{field:'phone', width:130}">电话</th>


        <th lay-data="{fixed: '', width:160, align:'center', toolbar: '#barDemo'}">操作</th>

    </tr>
    </thead>
</table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-normal layui-btn-mini" lay-event="detail" onclick="look()">查看编辑</a>
   <!-- <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>-->
    <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
</script>

<div class="look_div" hidden="hidden" id="look_div">
    <form class="layui-form layui-form-pane" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">学号</label>
            <div class="layui-input-block">
                <input type="text" id="dmid" name="title" autocomplete="off" placeholder="请输入学号" class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="name" id="dmname"  placeholder="请输入姓名" autocomplete="off" class="layui-input"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">楼栋</label>
            <div class="layui-input-inline">
                <input type="text" name="name" id="dmbuild"  placeholder="楼栋" autocomplete="off" class="layui-input"/>
            </div>
        </div>

        <div class="layui-form-item" pane="">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" id="nan" name="sex" value="男" title="男"/>
                <input type="radio" id="nv" name="sex" value="女" title="女"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机</label>
            <div class="layui-input-inline">
                <input type="text" name="name" id="dmphone"  placeholder="请输入手机" autocomplete="off" class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="password" name="password" id="dmpassword" placeholder="请输入密码" autocomplete="off" class="layui-input"/>
            </div>
            <div class="layui-form-mid layui-word-aux">请务必填写用户名</div>
        </div>

        <div class="layui-form-item">
            <button class="layui-btn" lay-submit="" lay-filter="demo2">跳转式提交</button>
        </div>
    </form>
</div>

<div class="out_bg" hidden="hidden"></div>


<script th:src="@{/layui/layui.all.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/js/StudentSelect.js}"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use('table', function(){
        var table = layui.table;
        //监听表格复选框选择
        table.on('checkbox(demo)', function(obj){
            console.log(obj)
        });
        //监听工具条
        table.on('tool(demo)', function(obj){
            var data = obj.data;

            var height = $(document).height();
            $('.out_bg').css('height', height);
            $('.out_bg').show();
            console.log(height);

            console.log(obj.data);
            $('#dmid').val(obj.data.dm_id);
            $('#dmname').val(obj.data.name);
            $('#dmsex').val(obj.data.sex);
            $('#dmbuild').val(obj.data.build_id);
            $('#dmpassword').val(obj.data.password);
            $('#dmphone').val(obj.data.phone);
            if (obj.data.sex == '男') {
                console.log($('#nan'))
                $('#nan').attr("checked", '');
            } else {
                $('#nv').attr('checked', 'checked');
            }
            /*  $('#roomid').val(obj.data.room_id);
             $('#roomid').val(obj.data.room_id);
             $('#roomid').val(obj.data.room_id);*/



            if(obj.event === 'detail'){
                layer.msg('ID：'+ data.dm_id + ' 的查看操作');
            } else if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                layer.alert('编辑行：<br/>'+ JSON.stringify(data))
            }
        });

       /* var $ = layui.$, active = {
            getCheckData: function(){ //获取选中数据
                var checkStatus = table.checkStatus('idTest')
                    ,data = checkStatus.data;
                layer.alert(JSON.stringify(data));
            }
            ,getCheckLength: function(){ //获取选中数目
                var checkStatus = table.checkStatus('idTest')
                    ,data = checkStatus.data;
                layer.msg('选中了：'+ data.length + ' 个');
            }
            ,isAll: function(){ //验证是否全选
                var checkStatus = table.checkStatus('idTest');
                layer.msg(checkStatus.isAll ? '全选': '未全选')
            }
        };*/

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>

</body>
</html>